<extend name="Common:base"/>
<block name="head">
	<style>
	  .el-table .info-row {
	    background: #c9e5f5;
	  }

	  .el-table .positive-row {
	    background: #e2f0e4;
	  }

	  .group-item .el-checkbox__label {
	  	display: none;
	  }
 </style>
</block>
<block name="body">
	<div class="container" id="app">
		<div v-show="show" class="wrapp" style="display:none">
		  <!-- table -->
		  <el-row>
		   <el-col :span="24">
			  <el-table 
			  :data="dataList" 
			  v-loading="dataLoad" 
			  element-loading-text="{:L('DATA_LOGIN')}" 
			  :row-class-name="tableRowClassName">
			    <el-table-column align="center" type="index"   label="{:L('INDEX')}" width="100"></el-table-column>
			    <el-table-column align="center" prop="name"    label="{:L('FIELD_NAME')}"></el-table-column>
			    <el-table-column align="center" prop="remark"  label="{:L('FIELD_REMARK')}"></el-table-column>
			    <el-table-column inline-template :context="_self" align="center"  label="{:L('FIELD_STATUS')}" width="100" >
					<div>
				      	<el-switch
						  v-model="row.switch"
						  on-color="#13ce66"
						  off-color="#ff4949" 
						  @change="switchHandle($index, row)">
						</el-switch>
					</div>
			    </el-table-column>
			    <el-table-column 
			    inline-template 
			    :context="_self" 
			    align="center" 
			    label="{:l('OPERATION')}" 
			    width="250">
			     <div>
			        <el-button
			          size="small"
			          @click="handleEdit($index, row)">
			          {:L('EDIT')}
			        </el-button>

			        <el-button
			          size="small"
			          type="primary"
			          @click="handleAuthoriz($index, row)">
			          {:L('AUTHORIZE')}
			        </el-button>

			        <el-button
			          size="small"
			          type="danger"
			          @click="handleDelete($index, row)">
			          {:L('DELETE')}
			        </el-button>
		       </div>
			    </el-table-column>
			  </el-table>
			 </el-col>
      </el-row>
      <!-- table -->
			<!-- toolbar -->
			<el-row type="type"  justify="space-between" align="middle"  class="row-bg">
			  <el-col :span="12">
			  <div class="grid-content bg-purple">
			  	<span class="wrapper">
			  		<el-tooltip content="{:L('ADD_NEW')}" placement="right">
					    <el-button size="small"  @click="openDialog('add')" icon="plus" type="primary">{:L('ADD')}</el-button>
				    </el-tooltip>
				  </span>
			  </div>
			  </el-col>
			   <el-col :span="12">
				  <div class="grid-content bg-purple-light pull-right" style="display: none">
				    <!-- page -->
				    <include file="Common:_pagination" />
				    <!-- / page -->
				  </div>
			  </el-col>
			</el-row>
			<!-- / toolbar -->
		</div>
		<div v-show="show" style="display:none">
			<!-- 添加 -->
			<include file="_add" />
			<!-- /添加 -->

			<!-- 编辑 -->
			<include file="_edit" />
			<!-- /编辑 -->

			<!-- 授权 -->
			<include file="_access" />
			<!-- /授权 -->
		</div>
	</div>
</block>
<block name="scripts">
	<script>

		var authNodeList = {:json_encode($nodeList)};
		var authForm = {};
		authNodeList.forEach(function(currentValue, index){
			authForm[currentValue.id] = false;
			authForm['son'+ currentValue.id] = [];
		})

	</script>
	<script>
		page.setAuthFormUrl = "{:U('setAccess')}";
		page.getAuthUrl = "{:U('getAccess')}";

		window.defaultOption.setDatas({
			searchForm:{
				p   : 0,
				name: "",
			},
			nodeList:authNodeList,
			enames:{:json_encode($enames)}

		}).setForm('status',{
			id:0,
			status:0
		}).setForm('add', {
			name:"",
			// pid:0,
			remark:'',
			status:'1',
			ename:""
		}).setForm('edit', {
			name:"",
			id:"",
			remark:'',
			status:'',
			ename:""
		}).setForm('setAuth',{
			role_id:0,
			node:[],
			cnode:[]
		}, true).setMethod('beforeList', function(dataList){
			dataList.forEach(function(currentValue, index) {
				currentValue['switch'] = currentValue.status == 1 ? true : false;
			})
			return dataList;
		}).setMethod('switchHandle', function(index, row){

			row.status = row.switch ? '0' : '1'; 
			this.initObject(this.statusForm, row);
			this.statusIndex = index;
			var  vmThis = this;
			
			//暂时这样了 这里强耦合
			this.$http.post(page.editFormUrl, this.statusForm).catch(function(response){
				vmThis.$message({
				  message: '状态更改失败',
				  type: 'error'
				});
				vmThis.dataList[vmThis.statusIndex].switch = ! vmThis.dataList[vmThis.statusIndex].switch ;
			});
		}).setMethod('handleAuthoriz', function(index, row){
				this.openDialog('setAuth');
				this.setAuthForm.role_id = row.id;
				var vmThis = this;
				//得到 授权 列表
			this.$http.get(page.getAuthUrl, {params:{role_id: row.id} }).then(function(response){
				var len  = response.body.length;
				
				if (len>0) {
					vmThis.setAuthForm.node = [];
					response.body[0].forEach(function(currentValue){
						console.log(currentValue);
						vmThis.setAuthForm.node.push(currentValue.node_id);
					})
				}

				if (len>1) {
					vmThis.setAuthForm.cnode = [];
					response.body[1].forEach(function(currentValue){
						vmThis.setAuthForm.cnode.push(currentValue.node_id);
					})
				}

				

				
			})



		}).setRowStyle();
		

	</script>
</block>